<template>
  <van-popup
    v-model:show="state.show"
    position="bottom"
    round
    :style="{ height: '70%' }"
  >
    <div class="pop">
      <div class="header van-hairline--bottom">
        请选择类型
        <van-icon name="cross" class="cross" @click="toggle" />
      </div>
      <div class="content">
        <div
          @click="choseType({ id: 'all' })"
        >
          全部类型
        </div>
        <div class="title">支出</div>
        <div class="expense-wrap">
          <p
            @click="choseType(item)"
          
            v-for="item in state.expense"
            :key="item"
          >
            {{ item.name }}
          </p>
        </div>
        <div class="title">收入</div>
        <div class="income-wrap">
          <p
            @click="choseType(item)"
          
            v-for="item in state.income"
            :key="item"
          >
            {{ item.name }}
          </p>
        </div>
      </div>
    </div>
  </van-popup>
</template>


<script setup lang="ts">
import { onMounted, reactive, defineProps,defineExpose,defineEmits } from "vue";
import type {Type} from "../utils/guize";
import axios from "../utils/axios";

defineProps<{ select: Function }>();
const state = reactive({
	active: "全部类型",
	show: false,
	expense: [],
	income: []
});
const emits=defineEmits(["select"])

onMounted(async () => {
	const {
		data: { list }
	} = await axios.get("/type/list");
	state.expense = list.filter(i => i.type == 1);
  console.log(state.expense);
	state.income = list.filter(i => i.type == 2);
  console.log(state.income);
});


//弹窗的隐藏与显示
const toggle = () => {
	state.show = !state.show;
};

//选择标签方法
const choseType = (item:Type) => {
	state.show = false;
  emits("select", item);
};

defineExpose({
  toggle,
  state,
  choseType,
})

</script>




<style lang="scss" scoped>
.pop {
	position: relative;
	background-color: #f5f5f5;
	.header {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 1000;
		width: 100%;
		height: 56px;
		text-align: center;
		font-size: 14px;
		line-height: 56px;
		color: $color-text-base;
		background-color: #fff;
		.cross {
			position: absolute;
			left: 10px;
			top: 50%;
			font-size: 20px;
			transform: translateY(-50%);
			color: $color-text-secondary;
		}
	}
	.content {
		padding: 20px;
		.all {
			display: inline-block;
			padding: 12px 20px;
			font-size: 16px;
			color: $color-text-base;
			background-color: #fff;
		}
		.title {
			color: $color-text-caption;
			margin: 10px 0;
			font-size: 14px;
		}
		.expense-wrap,
		.income-wrap {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			p {
				width: calc((100% - 20px) / 3);
				text-align: center;
				padding: 12px 0;
				margin-bottom: 10px;
				background-color: #fff;
				font-size: 16px;
        color:rgb(18, 17, 17)!important;
			}
		}
		.active {
			background-color: $primary !important;
			color: #fff;
		}
	}
}
</style>
